<template>
	<view class="content">
		<view class="one" style="padding: 30rpx;">
			<view class="topview">{{newqualityList['node'] || '--'}}</view>
			<view class="topview" style="font-size: 26rpx;color: #8D8D8D;">u-{{newqualityList['province'] || '--'}}{{newqualityList['city'] || '--'}}-{{newqualityList['node'] || '--'}}</view>
			<view style="font-size: 24rpx;color: #8D8D8D;">报告说明:上机阶段进行带宽与硬件测评，部署任务后出每日网络和硬件服务质量测评。</view>
		</view>
		<view class="title">
			<view>带宽压测</view>
			<!-- <view style="font-size: 26rpx;color: #4667C2;margin-left: 20rpx;line-height: 42rpx;">测试结果 ></view> -->
			<view style="font-weight: 200;font-size: 36rpx;color: #C95A64;margin-left: 240rpx;">{{dataList['date'] || '--'}}</view>
		</view>
		<view class="one">
			<view class="one-info">
				<view class="" style="color: #989898;">上报带宽</view>
				<view class="">{{newqualityList['usbw'] || ''}}Mbps*{{newqualityList['bw_num'] || '--'}}={{newqualityList['usbw']*newqualityList['bw_num'] || '--'}}Mbps</view>
			</view>
			<view class="one-info">
				<view class="" style="color: #989898;">极限压测平均</view>
				<view class="">{{newqualityList['limit_agv'] || ''}}Mbps</view>
			</view>
			<view class="one-info">
				<view class="" style="color: #989898;">极限压测满意度</view>
				<view class="">{{(newqualityList['limit_sat']*100).toFixed(2) || ''}}%</view>
			</view>
			<view class="one-info">
				<view class="" style="color: #989898;">丢包压测平均</view>
				<view class="">{{newqualityList['drop_agv'] || ''}}Mbps</view>
			</view>
			<view class="one-info">
				<view class="" style="color: #989898;">丢包压测满意度</view>
				<view class="">{{(newqualityList['drop_sat']*100).toFixed(2) || '--'}}%</view>
			</view>
			<view class="one-info">
				<view class="" style="color: #989898;">TCP重传率</view>
				<view class="">{{newqualityList['tcp'] || '--'}}%</view>
			</view>
			<!-- <view class="one-info">
				<view class="">晚高峰压测平均</view>
				<view class="">{{dataList['remark'] || '--'}}</view>
			</view> -->
		</view>


		<view class="title">
			<view>硬件压测</view>
		</view>
		
		<view class="three" style="margin-bottom: 150rpx;">
			<view class="three-info">
				<view class="" style="color: #989898;">CPU线程数</view>
				<view class="three-info-d">{{newqualityList['cpuNum'] || '--'}}</view>
			</view>
			<view class="three-info">
				<view class="" style="color: #989898;">内存大小</view>
				<view class="three-info-d">{{newqualityList['memorySize'] | '--'}}GB</view>
			</view>
			<view class="three-info">
				<view class="" style="color: #989898;">CPU主频</view>
				<view class="three-info-d">{{newqualityList['cpuFrequency'] || '--'}}G</view>
			</view>
			<!-- <view class="three-info">
				<view class="">带宽磁盘比</view>
				<view class="three-info-d">{{dataList['hardware']['averageIOPS'] || '-'}}</view>
			</view>
			<view class="three-info">
				<view class="">单线路平均IOPS</view>
				<view class="three-info-d">{{dataList['hardware']['averageIOPS'] || '-'}}</view>
			</view> -->
			<!-- <view class="three-info">
				<view class="">数据盘</view>
				<view class="three-info-d">{{dataList['hardware']['diskInfo'] || '-'}}</view>
			</view> -->
			<!-- 数据盘数据展示区域 -->
			<!-- <view class="horizontal-scroll">
				<view class="fixed-content" > 
					<view class="td" bindtap="showAll" style="font-weight: bolder;">磁盘名</view>
					<view class="td" bindtap="showAll" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.name}}</view>
				</view>
				<view class="scroll-content">
					<scroll-view class="scroll-view_w" scroll-x style="width:100%">
						<view class="item">
							<view class="td" style="font-weight: bolder;">类型</view>
							<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.type}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">大小</view>
							<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.size}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">磁盘利用率</view>
							<v<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.averageIOPS || '-'}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">IOPS</view>
							<v<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.iops || 0}}</view>
						</view>
						<view class="item">
							<view class="td" style="font-weight: bolder;">压测用时</view>
							<v<view class="td" v-for="(item,index) in dataList['diskIOPS']" :key="index">{{item.measureCost || 0}}</view>
						</view>
					</scroll-view>
				</view>
			</view> -->
			<!-- <view class="three-info">
				<view class="">网卡</view>
				<view class="three-info-d">{{newqualityList['hardware']['averageIOPS'] || '-'}}</view>
			</view> -->

			<view class="one" style="padding: 0rpx;">
				<view class="one-info">
					<view class="" style="color: #989898;">地域</view>
					<view class="">{{newqualityList['province']}}{{newqualityList['city'] || '--'}}</view>
				</view>
				<view class="one-info">
					<view class="" style="color: #989898;">运营商</view>
					<view class="">{{newqualityList['isp'] || '--'}}</view>
				</view>
				<!-- <view class="one-info">
					<view class="">城域网节点/接入网节点</view>
					<view class="">{{dataList['remark'] || '--'}}</view>
				</view> -->
				<!-- <view class="one-info">
					<view class="">NAT类型</view>
					<view class="">{{newqualityList['nat'] || '--'}}</view>
				</view> -->
				<view class="one-info">
					<view class="" style="color: #989898;">网络类型</view>
					<view class="">{{newqualityList['dial_type'] || '--'}}</view>
				</view>
				<!-- <view class="one-info">
					<view class="">业务其他要求</view>
					<view class="">{{dataList['remark'] || '--'}}</view>
				</view> -->
			</view>
		</view>
		<view style="position: fixed;top: 1300rpx;">
			<view style="display: flex;height: 200rpx;width: 746rpx;background-color: white;margin-left: -20rpx;">
				<view style="width: 25%;height: 80rpx;text-align: center;margin: 20rpx 100rpx;line-height: 70rpx;color: #7386C9;border: 2rpx solid #CADEF3;border-radius: 20rpx;" @tap="toyace()">压测</view>
				<!-- <view style="width: 25%;height: 80rpx;text-align: center;margin: 20rpx 40rpx;line-height: 70rpx;color: #7386C9;border: 2rpx solid #CADEF3;border-radius: 20rpx;" @tap="toduanz()">短Z压测</view> -->
				<view style="width: 25%;height: 80rpx;text-align: center;margin: 20rpx 80rpx;line-height: 70rpx;color: #7386C9;border: 2rpx solid #CADEF3;border-radius: 20rpx;" @tap="toyewu()">推荐业务</view>
			</view>
		</view>
		
		<!-- 带宽压测显示区域 -->
		<view class="box" v-if="show"  @tap="coneal"></view>
		
		<view class="modal" v-if="show">
			<view class="title">
				开始宽带测试
			</view>
			<view style="margin-top: 20rpx;">
				请确认单条上行带宽 (Mbps) :
			</view>
			<view class="content1">
				<input type="text" v-model="yacevalue">
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="coneal">取消</view>
				<view class="submit" @tap="comfim">确认</view>
			</view>
		</view>
		
		<!-- 短Z压测显示区域 -->
		<view class="box" v-if="showZ"  @tap="conealZ"></view>
		
		<view class="modal" v-if="showZ">
			<view class="title">
				开始宽带测试
			</view>
			<view style="margin-top: 20rpx;">
				请确认单条上行带宽 (Mbps) :
			</view>
			<view class="content1">
				<input type="text" v-model="yacevalue">
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="coneal">取消</view>
				<view class="submit" @tap="comfim">确认</view>
			</view>
		</view>
		
		<Modal
			v-model="show1" 
			title='温馨提示' 
			:text="msg"
			confirm-text='确定'
			noCancel=true
			@confirm='confirms()'
		/>
		
	</view>
</template>

<script>
	let App = getApp()
	import Modal from '@/components/x-modal/x-modal'
	export default {
		components: {
			Modal
		},
		data() {
			return {
				eid:'',
				dataList:[],
				equ_status:0,
				stage:'',
				rtt:0,
				tcpRate:0,
				limitBw:0,
				ycmanyi:0,
				bandwidthList:[],
				deviceList:[],
				newqualityList:[],
				show:false,
				yacevalue:"",
				showZ:false,
				msg:"1111",
				show1:false
			}
		},
		onLoad(option) {
			uni.showLoading({
				title:'请稍后'
			})
			this.eid = option.selectID
			this.equ_status = option.status
			this.getnewpaiquality()
			//this.getInfo()
			//this.getbandwidth()
			//this.getdevice()
			//this.getInfo1()
		},
		methods: {
			
			//派享质量报告
			getInfo(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getpaiquality')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataList = res.data
						// this.ycmanyi = res.data.testSat.value
						// console.log(this.ycmanyi)
						this.rtt = 0;
						this.tcpRate = 0
						// if(res.data.pressure){
						// 	for(var i=1;i<res.data.pressure[0].lines.length;i++){
						// 		this.rtt += res.data.pressure[0].lines[i].rtt
						// 		this.tcpRate += res.data.pressure[0].lines[i].tcpRetryMissRate
						// 		this.limitBw += res.data.pressure[0].lines[i].limitBw
						// 	}
						// }
						
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			//派享带宽压测结果
			getbandwidth(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getbandwidth')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.bandwidthList = res.data
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			//派享设备信息
			getdevice(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getdevice')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					this.deviceList = res.data.devices[0]
					console.log(this.deviceList)
				})
			},
			
			//新派享质量报告
			getnewpaiquality(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getnewpaiquality')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					this.yacevalue = res.usbw
					this.newqualityList = res
					console.log(this.deviceList)
				})
			},
			
			coneal(){
				this.show = false
			},
			
			comfim(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getbandwidth')({
					nodeId:this.eid,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					this.show1 = true
					console.log(res)
					this.msg = res.data.message
					this.show = false
				})
			},
			
			confirms(){
				this.show1 = false
			},
			
			coneal(){
				this.show = false
			},
			
			toyace(){
				this.show = true
			},
			
			conealZ(){
				this.showZ = false
			},
			
			toduanz(){
				this.showZ = true
			},
			
			getInfo1(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('statuses')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.stage = res.data.stage
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			networkpressure(){
				if(this.equ_status == 2){
					uni.showModal({
						title:'设备不在线'
					})
				}
				
				uni.showLoading({
					title:'压测中'
				})
				this.$api.interfaceApi('networkpressure')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						uni.showToast({
							title:'压测成功'
						})
					}else{
						uni.showModal({
							title:res.data.desc
						})
					}
				})
			},
			
			seeAll(){
				uni.navigateTo({
					url:'/pages/equipment/see-all?eid='+this.eid
				})
			},
			
			toyewu(){
				uni.navigateTo({
					url:"/pages/equipment/yewu"
				})
			},
			
		},
		
		//时间戳的处理
		filters:{
			formatDate: function(value) {
				var date = new Date();
				date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			},
			
			updateTime:function(value){
				return (value/1024/1024*1).toFixed(2)
			}
			
			 
		},
		
		
	}
</script>

<style lang="less">
	.content {
		//position: relative;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #eee;
		
		.topview {
			margin-bottom: 30rpx;
		}
		
		.title {
			font-weight: 500;
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			display: flex;
			text-align: center;
			margin-left: 20rpx;
			
		}
		
		.box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 9998;
		}
		.modal{
			position: fixed;
			//top: 30%;
			//left: 20%;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 70%;
			height: 320rpx;
			//position: absolute;
			top: 35%;
			left: 15%;
			z-index: 9999;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			.content1{
				height: 70rpx;
				background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
			}
			.btn-group{
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					width: 50%;
					text-align: center;
				}
				.submit{
					color: #007AFF;
					width: 50%;
					text-align: center;
				}
			}
		}

		.one {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			//margin-bottom: 50rpx;

			.one-info {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}

		.two {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.two-info {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 20rpx;
				box-sizing: border-box;
			}
			
			

			.two-info-d {
				font-size: 26rpx;
			}

			.two-info-t {
				font-size: 24rpx;
				color: #ffaa00;
			}

			.two-info-s {
				font-size: 24rpx;
				color: #00aaff;
			}

			.horizontal-scroll {
			  overflow: hidden;
			}
			
			.fixed-content {
			  float: left;
			  width: 35%;
			}
			
			.scroll-content {
			  float: left;
			  width: 65%;
			}
			
			.scroll-view_w {
			  width: 100%;
			  white-space: nowrap;
			}
			
			.scroll-view_w .item {
			  width: 150px;
			  display: inline-block;
			}
			
			.horizontal-scroll .th {
			  background: #75cae645;
			  height: 40px;
			  padding:0 10px;
			  line-height: 40px;
			  text-align: center;
			  font-size: 15px;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			}
			
			.horizontal-scroll .td {
			  background: #fff;
			  padding:0 10px;
			  font-size: 15px;
			  height: 40px;
			  line-height: 40px;
			  text-align: center;
			  overflow: hidden;
			  //text-overflow: ellipsis;
			  white-space: nowrap;
			  border-bottom:1rpx solid #eee;
			}
			.horizontal-scroll .td:nth-child(2n+1){
			  background: #75cae645;
			}
		}
		
		.three {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			//margin: 20rpx 0rpx;
		
			.three-info {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding: 20rpx;
				box-sizing: border-box;
			}
		
			.three-info-d {
				font-size: 26rpx;
			}
		
			.three-info-t {
				font-size: 24rpx;
				color: #ffaa00;
			}
		
			.three-info-s {
				font-size: 24rpx;
				color: #00aaff;
			}
		
			.horizontal-scroll {
			  overflow: hidden;
			}
			
			.fixed-content {
			  float: left;
			  width: 35%;
			}
			
			.scroll-content {
			  float: left;
			  width: 65%;
			}
			
			.scroll-view_w {
			  width: 100%;
			  white-space: nowrap;
			}
			
			.scroll-view_w .item {
			  width: 150px;
			  display: inline-block;
			}
			
			.horizontal-scroll .th {
			  background: #75cae645;
			  height: 40px;
			  padding:0 10px;
			  line-height: 40px;
			  text-align: center;
			  font-size: 15px;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			}
			
			.horizontal-scroll .td {
			  background: #fff;
			  padding:0 10px;
			  font-size: 15px;
			  height: 40px;
			  line-height: 40px;
			  text-align: center;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			  border-bottom:1rpx solid #eee;
			}
			.horizontal-scroll .td:nth-child(2n+1){
			  background: #75cae645;
			}
		}

	}
</style>
